<template>
	<view class="wp">
		<view class="video">
			<video v-if="liverData.live_cover_type==1" ref="myVideo" :src='liverData.live_url' autoplay :controls="false" :loop="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false"></video>
			<image v-else-if="liverData.live_cover_type==0" :src='liverData.live_url'></image>
		</view>
		<view class="position">
			<view class="po_con">
				<view class="join" @click="getInfo" v-if="liverData.status==1">点击进入直播间</view>
				<view class="headtit">多米街</view>
				<view class="headtit">{{liverData.live_name}}</view>
				<view class="headtit flex_box" v-if="liverData.status==0">
					<text>距离直播开始还剩</text>
					<uni-countdown color="#fff" splitorColor="#fff" :show-day="dayStatus" :hour="countdownList.hours"
						:minute="countdownList.minutes" :second="countdownList.seconds" @timeup="changeStatus"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axiosLive from '@/store/liveBroadcastAjax.js';
	export default {
		data() {
			return {
				info: [],
				mid: 0,
				liverData: {},
				countdownList: {
					hours: '',
					minutes: '',
					seconds: '',
					day: ''
				},
				dayStatus:false,
			};
		},
		onLoad(options){
			if(options.mid){
				uni.setStorageSync('mid',options.mid);
				this.mid = options.mid;
			}
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
		},
		onShow() {
			this.liveInfo()
			this.$nextTick(() => {
				// if(this.liverData.live_cover_type==1){
				// 	const videoRef = this.$refs.myVideo;
				// 	videoRef.play();
				// }
			})
		},
		methods: {
			getInfo(){
				axiosLive('live/getLiveInfo', 'POST', {}).then(res => {
					if (res.code == 0) {
						if(res.data.status==0){
							this.$api.msg('主播暂未上线');
						}else if(res.data.status==1){
							this.$navTo('/pages/live/index');
						}else if(res.data.status==2){
							this.$api.msg(res.msg);
						}
					}
				})
			},
			// 手动更改倒计时
			changeStatus(){
				this.liverData.status=1;
			},
			// 直播间信息
			liveInfo() {
				axiosLive('live/getLiveInfo', 'POST', {}).then(res => {
					if (res.code == 0) {
						this.liverData = Object.assign(res.data, {})
						if(res.data.status==0){
							this.detailTime(this.liverData.live_start_time)
						}
					}
				})
			},
			// 处理时间
			detailTime(futureDateTime) {
				const currentDate = new Date();
				const timeDifference = futureDateTime * 1000 - currentDate;
				const seconds = Math.floor((timeDifference / 1000) % 60);
				const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
				const hours = Math.floor(timeDifference / (1000 * 60 * 60));
				const day = Math.floor(timeDifference / (1000 * 60 * 60) / 24);
				let params = {
					seconds,
					minutes,
					hours,
					day
				}
				if(day>=1) this.dayStatus=true;
				this.countdownList = Object.assign(params, {})
			},
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.wp{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
.video{
	width: 100%;
	height: 100%;
	video{
		width: 100%;
		height: 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
}
.headtit{
	color: #fff;
	margin-bottom: 20rpx;
}
.position{
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	.po_con{
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		padding: 30rpx;
		.join{
			background: linear-gradient(24deg, #6950fb 0%,#af3ef2 72%,#b83af3 100%);
			color: #fff;
			letter-spacing: 16rpx;
			padding: 26rpx 40rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			text-align: center;
			margin: 0 auto 220rpx;
			width: 70%;
		}
	}
}
</style>
